<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>Main Page</title>
	<script src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
	<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css"/>-->

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

	<script src="/static/js/libs/StyledMarker.js"></script>
	<!--<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>-->
	<script src="/static/js/mobile.js"></script>
    <style>
	#route-details div {
		font-size: 0.8em !important;
		margin: 4px;
		text-align: left;
		margin-left: 8em;
	}

	#position-details {
		text-align: center !important;
		font-size: 0.9em !important;
	}

	#one h1:first-child {
		text-align: left;
		background-image: url('/static/images/regroup-mobile.png');
		background-repeat: no-repeat;
		background-position: 85% 43%;
		font-size: 1.2em;
	}
    </style>
</head>
<body>
	<div data-role="page" data-theme="a" data-transition="fade" class='firstpage' id="one">
		<div data-role="header">
			<h1 class="mobile-header">Wayfinder</h1>
		</div>
		<div data-role="content">
			<form action="" id="mobile-findpath" method="post">
				<ul data-role="listview" data-theme="c" data-inset="true">
					<li data-role="list-divider" style="text-align:center">Choose start and destination</li>
					<li data-role="fieldcontain">
					<div id="position-details" data-role="fieldcontain">
						<span>Your Position:&nbsp</span><span class="position"></span>
					</div>
					<select name="start" id="mobile-start">
						<option data-placeholder="true" value="">Current Position</option>
					</select>
					</li>
					<li data-role="fieldcontain">
					<select name="end" id="mobile-end">
					</select>
					</li>
					<li data-role="fieldcontain">
						<p><a href="#two" id="mybutton" data-theme="" data-iconpos="right" data-role="button" data-icon="gear">Show Route</a></p>
					</li>
				</ul>
			</form>
		</div>
	</div> <!-- /page one -->

	<!-- Start of second page: #two --> 
	<div data-role="page" data-theme="a" data-add-back-btn="true" id="two">
		<div data-role="header">
			<div id="route-details"></div>
		</div>
		<div data-role="content" style="padding:0px;margin:0;">
			<div id="map_canvas" style="width:100%;height:350px;"></div>
			<!--<div id="map_canvas" style="width:100%; height:100%;"></div>-->
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#" data-icon="forward" id="mobile-track">Track Pos</a></li>
					<li><a href="#" data-icon="back" id="mobile-track-stop">Stop Tracking</a></li>
				</ul>
			</div>
		</div>
	</div><!-- /page two -->
</body>
</html>
